<template>
  <div class="page-content">
    <hy-table
      :listData="dataList"
      :listCount="dataCount"
      v-model:page="pageInfo"
      v-bind="contentTableConfig"
    >
      <template #headerHandler>
        <el-button type="primary" @click="handleNewClick">new</el-button>
      </template>
      <!-- <template #status="scope">
        <el-button plain :type="scope.row.enable ? 'success' : 'danger'">
          {{ scope.row.enable ? '启用' : '禁用' }}
        </el-button>
      </template> -->
      <template #handler="scope">
        <div class="handle-btns">
          <el-button type="text" @click="handleEditClick(scope.row)"
            >edit</el-button
          >
          <el-button type="text" @click="handleDeleteClick(scope.row)"
            >delete</el-button
          >
        </div>
      </template>
    </hy-table>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import HyTable from '@/base-ui/table'
interface Props {
  pageName: string
  contentTableConfig: any
}
const props = withDefaults(defineProps<Props>(), {
  pageName: '',
  contentTableConfig: () => ({})
})
const store = useStore()
const pageInfo = ref({ currentPage: 1, pageSize: 10 })

watch(pageInfo, () => {
  getPageData()
})

const handleEditClick = (data: any) => {
  console.log(data)
}
const handleDeleteClick = (data: any) => {
  console.log(data)
}

const getPageData = (queryInfo: any = {}) => {
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
      size: pageInfo.value.pageSize,
      ...queryInfo
    }
  })
}
getPageData()

const dataList = computed(() => {
  return store.getters[`system/pageListData`](props.pageName)
})
const dataCount = computed(() =>
  store.getters['system/pageCount'](props.pageName)
)
const emit = defineEmits<{ (e: 'newBtnClick'): void }>()
const handleNewClick = () => {
  emit('newBtnClick')
}
defineExpose({
  getPageData
})
</script>
